<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="商品基本信息">
        <el-form ref="goodsForm" :model="goodsForm" label-width="120px">
          <el-form-item label="商品分类 ">
            <el-select v-model="goodsForm.goods.category1Id" placeholder="请选择一级商品类目">
              <el-option :label="cate.name" :value="cate.id" :key="cate.id" v-for="cate in category1"></el-option>
            </el-select>
            <el-select v-model="goodsForm.goods.category2Id" placeholder="请选择二级商品类目">
              <el-option :label="cate.name" :value="cate.id" :key="cate.id" v-for="cate in category2"></el-option>
            </el-select>
            <el-select v-model="goodsForm.goods.category3Id" placeholder="请选择三级商品类目">
              <el-option :label="cate.name" :value="cate.id" :key="cate.id" v-for="cate in category3"></el-option>
            </el-select>
            模板id:{{goodsForm.goods.typeTemplateId}}
          </el-form-item>
          <el-form-item label="商品名称 ">
            <el-input v-model="goodsForm.goods.goodsName" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="品牌 ">
            <el-select v-model="goodsForm.goods.brandId" placeholder="请选择品牌">
              <el-option :label="brand.text" :value="brand.id" v-for="brand in brandList" :key="brand.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="副标题 ">
            <el-input v-model="goodsForm.goods.caption" placeholder="请填写副标题"></el-input>
          </el-form-item>
          <el-form-item label="价格 ">
            <el-input v-model="goodsForm.goods.price" placeholder="请填写价格"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-input type="textarea" v-model="goodsForm.goodsDesc.introduction" placeholder="介绍一下你的商品吧"></el-input>
          </el-form-item>
          <el-form-item label="包装列表">
            <el-input type="textarea" v-model="goodsForm.goodsDesc.packageList" placeholder="请填写包装列表"></el-input>
          </el-form-item>
          <el-form-item label="售后服务">
            <el-input type="textarea" v-model="goodsForm.goodsDesc.saleService" placeholder="售后服务"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="商品图片">
        <el-button type="primary" plain @click="dialogFormVisible=true,fileList=[],imageObject={}">新建</el-button>
        <el-dialog title="上传商品图片" :visible.sync="dialogFormVisible">
          <el-form :model="imageObject">
            <el-form-item label="颜色:" label-width="80px">
              <el-input v-model="imageObject.color" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品图片:" label-width="80px" >
              <!--:http-request="uploadFile"  自定义文件上传 -->
              <el-upload
                class="upload-demo"
                action=" "
                :http-request="uploadFile"
                :file-list="fileList"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUploadImage">确 定</el-button>
          </div>
        </el-dialog>
        <el-table
          :data="goodsForm.goodsDesc.itemImages"
          style="width: 100%;">
          <el-table-column
            prop="color"
            header-align="center"
            align="center"
            width="100"
            label="颜色">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.url"  width="100px" height="100px">
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goodsForm.goodsDesc.itemImages.splice(scope.row.index,1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="扩展属性">
        <el-table
          :data="goodsForm.goodsDesc.customAttributeItems"
          style="width: 100%">
          <el-table-column
            prop="text"
            width="180"
            align="center"
            header-align="center">
          </el-table-column>
          <el-table-column align="center" header-align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="规格">
        <el-table
          :data="specList"
          style="width: 100%">
          <el-table-column
            width="180"
            align="center"
            header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.text}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center">
            <template slot-scope="scope">
              <!--@change每次绑定条件发生改变时-->
              <el-checkbox-group v-model="optionList[scope.$index]" @change="getSpecList">
                <el-checkbox v-for="option in scope.row.optionList" :label="option.optionName" :key="option.id"></el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
        <!--动态生成规格信息-->
        <el-table
          :data="goodsForm.items"
          style="width: 100%;">
          <el-table-column width="200px" align="center"
                           :key="key" :label="spec.attributeName"
                           v-for="(spec,key) in goodsForm.goodsDesc.specificationItems">
            <template slot-scope="scope">
              {{scope.row.spec[spec.attributeName]}}
            </template>
          </el-table-column>

          <!--2.2 处理价格-->
          <el-table-column  label="价格"  align="center" >
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"/>
            </template>
          </el-table-column>
          <!--2.3 处理数量-->
          <el-table-column  label="库存"  align="center" >
            <template slot-scope="scope">
              <el-input v-model="scope.row.num"/>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-button style="margin-top: 30px" type="primary" @click="save">保存</el-button>
      <el-button>返回列表</el-button>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        goodsForm: {
          goods:{
            typeTemplateId:''
          },
          goodsDesc:{
            itemImages:[],
            customAttributeItems:[],
            specificationItems:[],
          },
          items:[]
        },
        category1:[],     //一级分类列表
        category2:[],     //二级分类列表
        category3:[],      //三级分类列表
        brandList: [],     //品牌列表
        dialogFormVisible:false,
        imageObject:{},      //上传的文件对象
        fileList:[],        //上传的文件列表
        specList:[],        //定义规格和规格列表
        optionList:[],      //规格列表

      }
    },
    created() {
      this.findCategory1();

    },
    watch:{//监听变量的变化，变化则执行
      //查询出二级类目
      category1new(itemCatId,oldId){     //第一个参数是变化的值，第二个是没变话变量的值
        this.$http({
          url: this.$http.adornUrl(`shop/itemcat/findCategory2/${itemCatId}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.list)
            this.category2 = data.list;
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //查询出三级类目
      category2new(itemCatId,oldId){     //第一个参数是变化的值，第二个是没变话变量的值
        this.$http({
          url: this.$http.adornUrl(`shop/itemcat/findCategory3/${itemCatId}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.list)
            this.category3 = data.list;
            console.log("typeId",data.list[0].typeId)
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //根据三级类目查询出模板id
      category3new(itemCatId,oldId){     //第一个参数是变化的值，第二个是没变话变量的值
        this.$http({
          url: this.$http.adornUrl(`shop/itemcat/info/${itemCatId}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.goodsForm.goods.typeTemplateId = data.itemCat.typeId;
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //根据模板id查询出品牌信息、扩展属性、规格和规格列表
      templateIdChange(typeId,oldId){     //第一个参数是变化的值，第二个是没变话变量的值
        this.$http({
          url: this.$http.adornUrl(`shop/typetemplate/findById/${typeId}`),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            //得到品牌列表
            this.brandList = JSON.parse(data.typeTemplate.brandIds);
            //得到扩展列表
            this.goodsForm.goodsDesc.customAttributeItems = JSON.parse(data.typeTemplate.customAttributeItems);
            this.$http({
              url: this.$http.adornUrl(`shop/specification/findSpec/${typeId}`),
              method: 'get',
            }).then(({data}) => {
              if(data && data.code === 0){
                this.specList = data.specList;
                this.optionList= [];
                data.specList.forEach(sp=>{
                  this.optionList.push([])
                })
              }
            })
          }
        })
      },
    },
    computed:{   //计算属性
      category1new(){   //计算category1属性的变化
        return this.goodsForm.goods.category1Id;
      },
      category2new(){   //计算category2属性的变化
        return this.goodsForm.goods.category2Id;
      },
      category3new(){   //计算categor3属性的变化
        return this.goodsForm.goods.category3Id;
      },
      templateIdChange(){   //计算typeTemplateId属性的变化
        return this.goodsForm.goods.typeTemplateId;
      }
    },
    methods: {
      //查询一级商品类目  父级id等于0就是一级商品类目
      findCategory1(){
        this.$http({
          url: this.$http.adornUrl('/shop/itemcat/findCategory1'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.category1 = data.list;
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //文件上传
      uploadFile(val){
        //1. 构造上传的表单对象
        let data = new FormData();
        //2. 添加要上传的文件数据
        data.append("file",val.file);    //上传的文件对象
        //3. 清空上传的列表
        this.fileList = [];
        //4. 开始上传
        this.$http({
          url: this.$http.adornUrl('/shop/image/upload'),
          method: 'post',
          data:data,
        }).then(({data}) => {
          if(data.code == 0){
            //如果上传成功，就向文件列表添加文件
            this.fileList.push({name:val.raw,url:data.url});
            this.imageObject.url = data.url;
          }
        })
      },
      //保存图片信息
      saveUploadImage(){
        this.goodsForm.goodsDesc.itemImages.push(this.imageObject)
        this.dialogFormVisible=false;
      },
      //点击规格选项时触发的事件
      getSpecList(){
        //设置初始值
        this.goodsForm.goodsDesc.specificationItems= []
        //这里的optionList是选中的规格列表
        console.log("optionList",this.optionList);
        //遍历optionList
        for (let i = 0; i <this.optionList ; i++) {
          //获得规格名称
          let specName = this.specList[i].text;
          //赋值
          this.goodsForm.goodsDesc.specificationItems.push({"attributeName":specName,"attributeValue":this.optionList[i]});
          //过滤信息，显示attributeValue>0的信息
          this.goodsForm.goodsDesc.specificationItems.filter(f=> f.attributeValue.length>0)

          //为goodsForm.items商品列表赋值
          this.insertItems()

        }
      },
      //为goodsForm.items商品列表赋值
      insertItems(){
        //定义并赋初始值
        this.goodsForm.items = [{spec:{},price:0,num:8888,status:'0',isDefault:"0"}]
        //获取用户点击的规格选项
        let specItems = this.goodsForm.goodsDesc.specificationItems;
        //将选中的选项赋值给goodsForm.items
        specItems.forEach(item=>{
          this.goodsForm.items = this.getItem(this.goodsForm.items,item.attributeName,item.attributeValue)

        })
      },
      getItem(items,specName,specOpitons){
        //定义返回的数组
        let iteList = []
        //给items赋值
        items.forEach(item=>{
          specOpitons.forEach(spec=>{
            let option = JSON.parse(JSON.stringify(item))
            option.spec[specName] = spec
            iteList.push(option)
          })
        })
        return iteList;
      },
      //保存添加商品信息
      save(){

      },
    }
  }
</script>
